<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link
      href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />

    <!-- 引入 special 样式 -->
    <link rel="stylesheet" href="/public/css/special.css" />

    <!-- Custom styles for this template -->
    <link href="/public/css/index.css" rel="stylesheet" />
  </head>

  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#navbar"
            aria-expanded="false"
            aria-controls="navbar"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Help</a></li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search..." />
          </form>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active">
              <a href="#">学生信息 <span class="sr-only">(current)</span></a>
            </li>
            <li><a href="#">Reports</a></li>
            <li><a href="#">Analytics</a></li>
            <li><a href="#">Export</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item</a></li>
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
            <li><a href="">More navigation</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
          </ul>
        </div>
      </div>

      <!-- 添加学生表单内容 -->
      <div class="from">
        <div class="top-text">修改学生信息</div>
        <form action="/students/edit" method="post" autocomplete="off">
          <div class="form-group">
            <label for="exampleInputEmail1">学生ID</label>
            <input
              type="text "
              name="id"
              class="form-control"
              id="exampleInputEmail1"
              placeholder="Student ID"
              value="{{student.id}}"
              readonly
            />
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">学生姓名</label>
            <input
              type="text"
              name="name"
              class="form-control"
              id="exampleInputPassword1"
              placeholder="Student Name"
              value="{{student.name}}"
            />
          </div>
          <div class="form-group">
            <label for="exampleInputFile">学生性别:</label>
            <div>
              <label class="radio-inline">
                <input
                  type="radio"
                  class="gender"
                  placeholder="{{student.gender}}"
                  name="gender"
                  id="inlineRadio1"
                  value="0"
                />
                男
              </label>
              <label class="radio-inline">
                <input type="radio" name="gender" id="inlineRadio2" value="1" />
                女
              </label>
            </div>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">学生年龄</label>
            <input
              type="text"
              name="age"
              class="form-control"
              id="exampleInputPassword1"
              placeholder="Student Age"
              value="{{student.age}}"
            />
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">学生爱好</label>
            <input
              type="text"
              name="hobbies"
              class="form-control"
              id="exampleInputPassword1"
              placeholder="Student Hobbies"
              value="{{student.hobbies}}"
            />
          </div>
          <button type="submit" class="btn btn-default">完成修改</button>
        </form>
      </div>
    </div>
  </body>
  <script>
    var values = "0,1";
    values = values.split(",");
    var boy = document.querySelector("#inlineRadio1");
    var girl = document.querySelector("#inlineRadio2");
    var gender = document.querySelector(".gender");
    var sex = parseInt(gender.placeholder);
    for (var i = 0; i < values.length; i++) {
      if (values[i] === parseInt(boy.value)) {
        boy.checked = true;
      } else {
        girl.checked = true;
      }
    }

    if (sex === 0) {
      boy.checked = true;
    } else {
      girl.checked = true;
    }
  </script>
</html>
